<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品名称：</span>
                <el-input placeholder="输入商品名称" v-model.trim="good_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择站点：</span>
                <el-select v-model="sites_id" clearable placeholder="请选择站点">
                    <el-option v-for="item in siteArrs" :key="item.dc_id" :label="item.title" :value="item.dc_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择日期：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate" placeholder="请选择日期" />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>
        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane v-for="tabs in tabArrs" :key="tabs.name" :label="tabs.label" :name="tabs.name">
                <!-- 批量操作 -->
                <div class="batch-oper" v-if="tabName == 0">
                    <el-button type="default" plain @click="clickExamBtn">批量质检</el-button>
                </div>
                <div class="table-head flexs">
                    <div class="table-check">
                        <el-checkbox v-model="allChecked" @change="changeAll" />
                    </div>
                    <div class="table-good table-head-base">商品信息</div>
                    <div class="table-supp table-head-base">供应商信息</div>
                    <div class="table-buy-info table-head-base">质检信息</div>
                    <div class="table-oper table-head-base">操作</div>
                </div>
                <!-- 内容 -->
                <div class="table-body" v-loading="loading">
                    <template v-if="arr_data.length > 0 && !loading">
                        <div class="table-item" v-for="(item, index) in arr_data" :key="item.order_id">
                            <div class="table-item-head flexs">
                                <div class="table-item__head-left">
                                    <div class="table-check" style="margin-right: 12px">
                                        <el-checkbox v-model="item.is_select" @change="changeOne" />
                                    </div>
                                    <p class="item-head__sn">订单编号：{{ item.order_sn }}</p>
                                    <p class="item-head__text">货架号：{{ item.shelve_title + item.shelve_num }}</p>
                                    <p class="item-head__text">
                                        站点名称：<span>{{ item.dc_title }}</span>
                                    </p>
                                </div>
                                <div class="table-item__head-right"></div>
                            </div>
                            <div class="table-item-cont">
                                <div class="table-good table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr">
                                            <el-image
                                                class="table-lr__img"
                                                loading="lazy"
                                                :src="proxy.imgUrl + item.product_img + '!img_400'"
                                                fit="cover"
                                                v-if="item.product_img"
                                            />
                                            <div class="table-lr__right table-right-other">
                                                <p class="lr-user">
                                                    {{ item.product_name }}，<span
                                                        >等级：{{ item.level }}，数量：{{ item.product_number }}{{ item.unit }}， 颜色：{{
                                                            item.color
                                                        }}，规格：{{ item.norm }}/{{ item.unit }}
                                                    </span>
                                                </p>
                                                <p class="lr-price"><em>￥</em>{{ item.product_price }}，供应商价:<em>￥</em>{{ item.cost_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-supp table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr">
                                            <!-- <el-image class="table-lr__img img-round" loading="lazy"
                                            :src="proxy.imgUrl + item.supplier_img + '!img_400'" fit="cover"
                                            v-if="item.supplier_img" /> -->
                                            <div class="table-lr__right">
                                                <p class="lr-user">{{ item.supplier_title }}[ID:{{ item.supplier_id }}]</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-buy-info table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <p class="lr-user" style="margin-bottom: 4px">
                                            迟到：<span style="color: #4b93fa">{{ item.is_late == 0 ? "未迟到" : "已迟到" }}</span>
                                        </p>
                                        <p class="lr-user" style="margin-bottom: 4px">退/缺货数：{{ item.no_sku }}{{ item.unit || "" }}</p>
                                        <p class="lr-user">
                                            是否降级：<span style="color: #4b93fa">{{ item.is_demotion == 0 ? "未降级" : "已降级" }}</span
                                            >，降级数量：{{ item.demotion_num }}{{ item.unit || "" }}
                                        </p>
                                        <p class="lr-user">
                                            快递要求：<span style="color: #4b93fa">{{ item.express_require == 0 ? "早班" : "晚班" }}</span>
                                        </p>
                                        <p class="lr-user">换货数量：{{ item.exchange_nums }}{{ item.unit || "" }}</p>
                                        <p class="lr-user">取消商品数量：{{ item.cancel_num }}{{ item.unit || "" }}</p>
                                        <p class="lr-user">
                                            质检不合格时：<span style="color: #4b93fa">{{ item.quality_require == 0 ? "退货" : "降级" }}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="table-oper table-head-base">
                                    <div class="table-sub table-sub-btn" v-if="tabName == 0">
                                        <!-- <el-button link type="primary" class="theme-btn" @click="clickDetail(item)">查看详情</el-button> -->
                                        <el-button link type="primary" class="theme-btn" @click="clickLate(item, index)">标记迟到</el-button>
                                        <el-button link type="primary" class="theme-btn" @click="clickExchangeGoods(item)">换货</el-button>
                                        <el-button link type="primary" class="theme-btn" @click="clickReturnGoods(item)">退/缺货</el-button>
                                        <el-button link type="primary" class="theme-btn" @click="clickDemote(item)">降级</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="table-none" v-if="arr_data.length == 0 && !loading">暂无数据</div>
                </div>
                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <!-- 标记迟到 -->
        <el-dialog v-model="dialogLate" title="标记迟到" width="600px" :append-to-body="true" :destroy-on-close="true">
            <detail-item bottom="6px" title-width="100px" title="备注信息">
                <el-radio-group v-model="is_late">
                    <el-radio label="0" size="large">未迟到</el-radio>
                    <el-radio label="1" size="large">已迟到</el-radio>
                </el-radio-group>
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmLate">确认</el-button>
                    <el-button @click="dialogLate = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 换货 -->
        <el-dialog v-model="dialogExGoods" title="换货" width="600px" :append-to-body="true" :destroy-on-close="true" @close="closeExGoods">
            <detail-item title="商品总数" :value="`${itemObjs.product_number}${itemObjs.unit}`" bottom="16px" title-width="120px" value-color="#4B93FA" />
            <detail-item class="detail-line" bottom="16px" title-width="120px" title="已换货数量" :value="itemObjs.exchange_nums" />
            <detail-item class="detail-line" bottom="16px" title-width="120px" title="换货数量">
                <el-input-number v-model="exc_nums" :min="1" :max="itemObjs.product_number - itemObjs.cancel_num <= 0 ? 1 : itemObjs.product_number - itemObjs.cancel_num" />
            </detail-item>
            <detail-item bottom="6px" title-width="120px" title="换货备注">
                <el-input v-model.trim="pub_remarks" type="textarea" clearable :rows="6" style="width: 380px" placeholder="请输入备注" />
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmExGoods">确认</el-button>
                    <el-button @click="closeExGoods">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 退/缺货 -->
        <el-dialog v-model="dialogReturnGoods" title="退/缺货" width="600px" :append-to-body="true" :destroy-on-close="true" @close="closeReturnGoods">
            <detail-item title="商品总数" :value="`${itemObjs.product_number}${itemObjs.unit}`" bottom="16px" title-width="120px" value-color="#4B93FA" />
            <detail-item class="detail-line" bottom="16px" title-width="120px" title="已退/缺货数" :value="itemObjs.no_sku"></detail-item>
            <detail-item class="detail-line" bottom="16px" title-width="120px" title="退/缺货数量">
                <el-input-number v-model="rg_nums" :min="1" :max="itemObjs.product_number" />
            </detail-item>
            <detail-item bottom="6px" title-width="120px" title="备注信息">
                <el-input v-model.trim="rg_remarks" type="textarea" clearable :rows="6" style="width: 380px" placeholder="请输入备注信息" />
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmReturnGoods">确认</el-button>
                    <el-button @click="closeReturnGoods">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 降级 -->
        <el-drawer title="降级" v-model="drawerLevel" direction="rtl" size="900px" :append-to-body="true" :destroy-on-close="true" @close="closeLevel">
            <div class="xq-box">
                <detail-item title="商品名称" :value="itemObjs.product_name" bottom="16px" />
                <detail-item title="供应商信息" :value="`${itemObjs.supplier_title}[ID:${itemObjs.supplier_id}]`" bottom="16px" />
                <div class="od-one">
                    <div class="od-one__item">
                        <detail-item title="商品级别" :value="`${itemObjs.level}级`" bottom="16px" value-color="#4B93FA" />
                        <detail-item title="退/缺货数" :value="`${itemObjs.no_sku}${itemObjs.unit}`" bottom="16px" value-color="#4B93FA" />
                        <detail-item title="供应商价" :value="itemObjs.cost_price" bottom="16px" price-icon value-color="#4B93FA" />
                    </div>
                    <div class="od-one__item">
                        <detail-item title="商品总数" :value="`${itemObjs.product_number}${itemObjs.unit}`" bottom="16px" value-color="#4B93FA" />
                        <detail-item title="取消商品数" :value="`${itemObjs.cancel_num}${itemObjs.unit}`" bottom="16px" value-color="#4B93FA" />
                        <detail-item title="质检不合格时" :value="itemObjs.quality_require == 0 ? '退货' : '降级'" bottom="16px" value-color="#4B93FA" />
                    </div>
                    <div class="od-one__item">
                        <detail-item title="换货数量" :value="`${itemObjs.exchange_nums}${itemObjs.unit}`" bottom="16px" value-color="#4B93FA" />
                        <detail-item title="商品价格" :value="itemObjs.product_price" bottom="16px" price-icon value-color="#4B93FA" />
                        <detail-item title="降级数量" :value="`${itemObjs.demotion_num}${itemObjs.unit}`" bottom="16px" value-color="#4B93FA" />
                    </div>
                </div>
                <detail-item title="降级列表" bottom="16px">
                    <el-button style="margin-bottom: 10px" type="primary" @click.stop="addLevel">添加降级</el-button>
                    <el-table
                        class="table-mb"
                        :data="demoteArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                    >
                        <el-table-column label="等级">
                            <template #default="{ row }">
                                <el-select v-model="row.level_id" clearable placeholder="请选择站点">
                                    <el-option v-for="item in levelArrs" :key="item.level_id" :label="item.level_name" :value="item.level_id" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品价格">
                            <template #default="{ row }">
                                <el-input v-model.trim="row.product_price" oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="商品价格(不超过供应价)" />
                            </template>
                        </el-table-column>
                        <el-table-column label="数量">
                            <template #default="{ row }">
                                <el-input-number
                                    v-model="row.nums"
                                    :min="1"
                                    :max="itemObjs.product_number"
                                    @change="(val, old) => changeNums(val, old, row)"
                                    v-if="row.nums"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" class-name="operation-nav" fixed="right">
                            <template #default="scope">
                                <p class="link-item" style="color: #4b93fa" @click.stop="delLevel(scope.$index)">删除</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </detail-item>
                <detail-item class="upload-detail" bottom="16px" title="凭证图片">
                    <div class="upload-box">
                        <div class="img-list" v-if="photos.length > 0">
                            <div class="img-selects" v-for="(item, index) in photos" :key="index">
                                <el-image class="img-selects__pic" :src="proxy.imgUrl + item + '!img_400'" :preview-src-list="srcList" :initial-index="index" fit="cover" />
                                <div class="img-del" @click.stop="delImg(index)">
                                    <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                                </div>
                            </div>
                        </div>
                        <div class="img-box flexs-center" @click.stop="showImg = true" v-if="photos.length < 5">
                            <el-icon color="#999" size="26px">
                                <UploadFilled />
                            </el-icon>
                        </div>
                    </div>
                    <p class="input-tips">
                        最多可上传<code>{{ photos.length }}/5</code>张
                    </p>
                </detail-item>
                <detail-item bottom="16px" title="备注信息">
                    <el-input v-model.trim="note" type="textarea" clearable :rows="6" maxlength="100" show-word-limit placeholder="请输入备注信息" />
                </detail-item>
            </div>
            <template #footer>
                <div class="drawer-footer flexs-center">
                    <el-button type="primary" :loading="form_loading" @click="confirmLevel">确认降级</el-button>
                    <el-button @click="closeLevel">取消</el-button>
                </div>
            </template>
        </el-drawer>

        <!-- 图片库 -->
        <picture-library :show="showImg" :select_multiple="true" @close="showImg = false" @select="selectImg"> </picture-library>
        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { onBeforeRouteLeave } from "vue-router"
import { Search, CloseBold, UploadFilled } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import OneLoad from "@mixins/one-load"
import DetailItem from "@components/DetailItem.vue"
import GoBack from "@components/GoBack.vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const store = useBaseStore()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getSite()
    getList()
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "OrderDetail") {
        store.setInclude("ExamList")
    } else {
        store.delInclude("ExamList")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, arr_data, loading, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

/**
 * tab切换
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const tabName = ref("0")
const tabArrs = ref([
    {
        label: "待质检",
        name: "0",
    },
    {
        label: "已质检",
        name: "1",
    },
])
const handleTab = (pane) => {
    tabName.value = pane.index
    allChecked.value = false
    // let loading = tabArrs.value[pane.index].loading
    // loading && pubRefreshParams(getList)
    pubRefreshParams(getList)
}

function getList() {
    let day = area_time.value ? area_time.value.replace(/-/g, "") : ""
    let params = {
        page: page.value,
        limit: pageSize.value,
        order_sn: order_sn.value,
        uid: user_id.value,
        dc_id: sites_id.value,
        supplier_id: supplier_id.value,
        so: good_name.value,
        day,
    }
    let url = tabName.value == 0 ? "storage/quality/items" : "storage/quality/index"
    getdata(url, params)
}

// 搜索
const order_sn = ref("")
const area_time = ref("")
const user_id = ref("")
const sites_id = ref("")
const supplier_id = ref("")
const good_name = ref("") // 下单时间
const handleSearch = () => {
    search_btn.value = true
    allChecked.value = false
    pubRefreshParams(getList)
}
const disabledDate = (time) => {
    return time.getTime() > Date.now()
}

// 公用字段
const form_loading = ref(false)
const itemObjs = ref({}) // item数据
const itemIndex = ref({}) // item数据下标

/**
 * 表格操作
 * @param {Boolean} allChecked 全/反选值
 * @param {Array} ids 选中的值
 * @param {Function} changeAll 全/反选事件
 */
const allChecked = ref(false)
const ids = ref([])
const changeAll = (val) => {
    let arrs = []
    arr_data.value.map((item) => {
        item.is_select = val
        val && arrs.push(item.order_product_id)
    })
    ids.value = arrs
}
// 单选
const changeOne = () => {
    let flag = true,
        arrs = []
    for (let i = 0; i < arr_data.value.length; i++) {
        if (!arr_data.value[i].is_select) {
            flag = false
        } else {
            arrs.push(arr_data.value[i].order_product_id)
        }
    }
    allChecked.value = flag
    ids.value = arrs
}

// 批量质检
const clickExamBtn = () => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择需要质检的订单", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("storage/quality/affirm", {
            order_product_ids: ids.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "批量质检成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

/**
 * 标记迟到
 * @param {Boolean} dialogLate 迟到弹窗
 * @param {String} is_late [0:未迟到,1:已迟到]
 */
const dialogLate = ref(false)
const is_late = ref("0")
const clickLate = (item, index) => {
    itemObjs.value = item
    itemIndex.value = index
    dialogLate.value = true
}
const confirmLate = () => {
    form_loading.value = true
    proxy.$axios
        .post("storage/quality/late", {
            order_product_id: itemObjs.value.order_product_id,
            is_late: is_late.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                allChecked.value = false
                dialogLate.value = false
                proxy.$message({ message: "标记成功！", type: "success" })
                arr_data.value[itemIndex.value].is_late = is_late.value
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

// 站点信息
const siteArrs = ref([])
function getSite() {
    proxy.$axios
        .get("operation/dc")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                siteArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 降级
 * @param {Boolean} drawerLevel 弹窗
 * @param {String} note 备注
 * @param {Array} demoteArrs 降级列表
 */
const drawerLevel = ref(false)
const note = ref("")
const clickDemote = (row) => {
    if (row.supplier_num <= 0) {
        proxy.$message({ message: "商品已达到最大降级数！", type: "warning" })
        return
    }
    itemObjs.value = row
    drawerLevel.value = true
    getLevels()
}
const closeLevel = () => {
    drawerLevel.value = false
    note.value = ""
    demoteArrs.value = []
}
// 添加降级
const demoteArrs = ref([])
const addLevel = () => {
    let nums = 0
    if (demoteArrs.value.length > 0) {
        demoteArrs.value.map((item) => {
            nums += Number(item.nums)
        })
    }
    if (itemObjs.value.supplier_num <= nums) {
        proxy.$message({ message: `该商品最大降级数为${itemObjs.value.supplier_num}`, type: "warning" })
        return
    }
    demoteArrs.value.push({
        product_price: "",
        nums: 1,
        level_id: "",
    })
}
// 确认降级
const confirmLevel = () => {
    if (demoteArrs.value.length == 0) {
        proxy.$message({ message: "请添加降级信息！", type: "warning" })
        return
    }
    let differ_price = itemObjs.value.product_price - itemObjs.value.cost_price <= 0 ? 0 : itemObjs.value.product_price - itemObjs.value.cost_price
    for (let i = 0; i < demoteArrs.value.length; i++) {
        if (!demoteArrs.value[i].product_price || !demoteArrs.value[i].level_id) {
            proxy.$message({ message: "请完善降级列表信息！", type: "warning" })
            return
        }
        if (Number(demoteArrs.value[i].product_price) < differ_price || Number(demoteArrs.value[i].product_price) > Number(itemObjs.value.cost_price)) {
            proxy.$message({ message: "商品价格应大于”商品价格-供应价“的差价且要小于该商品的供应价！", type: "warning" })
            return
        }
    }
    form_loading.value = true
    proxy.$axios
        .post("storage/quality/demotion", {
            order_product_id: itemObjs.value.order_product_id,
            demotion: demoteArrs.value,
            note: note.value,
            photos: photos.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                drawerLevel.value = false
                allChecked.value = false
                proxy.$message({ message: "降级成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const delLevel = (index) => {
    demoteArrs.value.splice(index, 1)
}
// 修改降级数量
const changeNums = (val, old, row) => {
    let nums = 0
    demoteArrs.value.map((item) => {
        nums += Number(item.nums)
    })
    if (itemObjs.value.supplier_num < nums) {
        proxy.$message({ message: `该商品最大降级数为${itemObjs.value.supplier_num}`, type: "warning" })
        row.nums = old
        return
    }
}
// 获取商品等级
const levelArrs = ref([])
function getLevels() {
    proxy.$axios
        .get("operation/productLevel")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                levelArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 添加凭证
 * @property {Boolean} showImg 显示图片库
 * @property {Array} photos 凭证数组
 * @property {Array} srcList 预览凭证数组
 * @property {Function} selectImg 选择图片
 */
const showImg = ref(false)
const photos = ref([])
const srcList = ref([])
const selectImg = (val) => {
    if (val.length > 5) {
        proxy.$message({ message: "最多添加5张图片！", type: "warning" })
        return
    }
    showImg.value = false
    for (let i = 0; i < val.length; i++) {
        photos.value.push(val[i].photo)
        srcList.value.push(proxy.imgUrl + val[i].photo)
    }
}
const delImg = (index) => {
    photos.value.splice(index, 1)
    srcList.value.splice(index, 1)
}

/**
 * 换货
 * @param {Boolean} dialogExGoods 弹窗
 * @param {Number} exc_nums 数量
 * @param {String} pub_remarks 备注
 */
const pub_remarks = ref("")
const exc_nums = ref(1)
const dialogExGoods = ref(false)
const clickExchangeGoods = (row) => {
    if (row.product_number - row.cancel_num <= 0) {
        proxy.$message({ message: "商品已达到最大换货数！", type: "warning" })
        return
    }
    itemObjs.value = row
    pub_remarks.value = row.exchange_note || ""
    exc_nums.value = row.exchange_nums
    dialogExGoods.value = true
}
const confirmExGoods = () => {
    let maxs = itemObjs.value.product_number - itemObjs.value.cancel_num
    if (maxs < exc_nums.value) {
        proxy.$message({ message: `该商品最大换货数为${maxs}`, type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("storage/quality/exchange", {
            order_product_id: itemObjs.value.order_product_id,
            nums: exc_nums.value,
            note: pub_remarks.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogExGoods.value = false
                allChecked.value = false
                proxy.$message({ message: "换货成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeExGoods = () => {
    pub_remarks.value = ""
    exc_nums.value = 1
    dialogExGoods.value = false
}

/**
 * 退/缺货
 * @param {Boolean} dialogReturnGoods 弹窗
 * @param {Number} rg_nums 数量
 * @param {String} rg_remarks 备注
 */
const rg_remarks = ref("")
const rg_nums = ref(1)
const dialogReturnGoods = ref(false)
const clickReturnGoods = (row) => {
    itemObjs.value = row
    rg_remarks.value = row.exchange_note || ""
    rg_nums.value = row.exchange_nums
    dialogReturnGoods.value = true
}
const confirmReturnGoods = () => {
    if (itemObjs.value.product_number < rg_nums.value) {
        proxy.$message({ message: `该商品最大退/缺货数为${itemObjs.value.product_number}`, type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("storage/quality/nosku", {
            order_product_id: itemObjs.value.order_product_id,
            nums: rg_nums.value,
            note: rg_remarks.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogReturnGoods.value = false
                allChecked.value = false
                proxy.$message({ message: "退/缺货货成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeReturnGoods = () => {
    pub_remarks.value = ""
    exc_nums.value = 1
    dialogReturnGoods.value = false
}

// const clickDetail = (row) => {
//     router.push({
//         path: "/Order/OrderDetail",
//         query: {
//             oid: row.order_id,
//         },
//     })
// }
</script>
<script>
export default {
    name: "ExamList",
}
</script>

<style lang="less" scoped>
.link-item {
    cursor: pointer;
}
.upload-detail {
    :deep(.detail-item__right) {
        overflow: inherit;
    }
    .upload-box {
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        .img-list {
            flex: none;
        }
        .img-selects,
        .img-box {
            margin-bottom: 10px;
        }
    }
}

:deep(.el-radio) {
    height: auto;
}

:deep(.detail-other) {
    .detail-item__left {
        line-height: 32px;
    }
}

.batch-oper {
    margin-top: @margin-xs;
    margin-bottom: @margin-lg;
}

.table-lr__img {
    width: 40px !important;
    height: 40px !important;
}

.table-lr__right {
    min-height: 40px !important;
}

.table-right-other {
    min-height: 20px !important;
}

.table-sub__p-mb {
    margin-bottom: 2px;
}

.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-sm;
    padding: 0px @padding-md;
}

.table-body {
    margin-bottom: @margin-xl;

    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-sm;

        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;

            .table-item__head-left {
                display: flex;
                align-items: center;

                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }

                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;

                    span {
                        color: @themes;
                    }
                }
            }
        }

        .table-item-cont {
            display: flex;

            & > div {
                padding: @padding-md @padding-xs;
                font-weight: 500;
                text-align: left;

                &:last-child {
                    text-align: left;

                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }

            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }

            .table-good {
                padding-left: @padding-md;
                padding-right: @padding-md;
                text-align: left;
            }

            .table-lr {
                margin-bottom: @margin-xs;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-supp {
    width: 14%;
    flex: none;
    text-align: left;
}

.table-buy-info {
    width: 25%;
    flex: none;
    text-align: left;
}

.table-oper {
    width: 18%;
    flex: none;
}

.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}

:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}

:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }

    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;

        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}

.table-none {
    font-size: @font-size-md;
    color: @gray-7;
    text-align: center;
    line-height: 40px;
}

.od-one {
    display: flex;
    margin-top: @margin-md;
    margin-bottom: @margin-mdl;
    .od-one__item {
        flex: none;
        width: 33.33%;
    }
}
</style>
